import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Icon from "@material-ui/core/Icon";
// core components
import AdminNavbarLinks from "../../components/Navbars/AdminNavbarLinks.jsx";
import RTLNavbarLinks from "../../components/Navbars/RTLNavbarLinks.jsx";

import sidebarStyle from "../../assets/jss/material-dashboard-react/components/sidebarStyle.jsx";
import {ExpandLess, ExpandMore, StarBorder} from "@material-ui/icons";
import Collapse from "@material-ui/core/Collapse";
import ListItemIcon from "@material-ui/core/ListItemIcon";

const Sidebar = ({ ...props }) => {
    const [open, setOpen] = React.useState(false);

    function handleClick() {
        setOpen(!open);
    }
  // verifies if routeName is the one active (in browser input)
  function activeRoute(routeName) {
    return props.location.pathname.indexOf(routeName) > -1 ? true : false;
  }

  const { classes, color, logo, image, logoText, routes } = props;
  var links = (
    <List className={classes.list}>
      {routes.map((prop, key) => {
          let activePro = " ";
          let listItemClasses;
          if (prop.path === "/upgrade-to-pro") {
              activePro = classes.activePro + " ";
              listItemClasses = classNames({
                  [" " + classes[color]]: true
              });
          } else {
              listItemClasses = classNames({
                  [" " + classes[color]]: activeRoute(prop.layout + prop.path)
              });
          }
          const whiteFontClasses = classNames({
              [" " + classes.whiteFont]: activeRoute(prop.layout + prop.path)
          });
        if(prop.children == null){
            return (
                <NavLink
                    to={prop.layout + prop.path}
                    className={activePro + classes.item}
                    activeClassName="active"
                    key={key}
                ><ListItem button className={classes.itemLink + listItemClasses}>
                    {typeof prop.icon === "string" ? (
                        <Icon
                            className={classNames(classes.itemIcon, whiteFontClasses, {
                                [classes.itemIconRTL]: props.rtlActive
                            })}
                        >
                            {prop.icon}
                        </Icon>
                    ) : (
                        <prop.icon
                            className={classNames(classes.itemIcon, whiteFontClasses, {
                                [classes.itemIconRTL]: props.rtlActive
                            })}
                        />
                    )}
                    <ListItemText
                        primary={
                            props.rtlActive ? prop.rtlName : prop.name
                        }
                        className={classNames(classes.itemText, whiteFontClasses, {
                            [classes.itemTextRTL]: props.rtlActive
                        })}
                        disableTypography={true}
                    />
                </ListItem>
                </NavLink>
            )
        }else{
            let child = prop.children;
            const nav = (<div>
                {child.map((item,key)=>{
                    key = key+"_child";
                    let activePro = " ";
                    let listItemClasses;
                    if (item.path === "/upgrade-to-pro") {
                        activePro = classes.activePro + " ";
                        listItemClasses = classNames({
                            [" " + classes[color]]: true
                        });
                    } else {
                        listItemClasses = classNames({
                            [" " + classes[color]]: activeRoute(item.layout + item.path)
                        });
                    }
                    const whiteFontClasses = classNames({
                        [" " + classes.whiteFont]: activeRoute(item.layout + item.path)
                    });
                    return <NavLink
                        to={item.layout + item.path}
                        className={activePro + classes.item}
                        activeClassName="active"
                        key={key}
                    >
                        <Collapse in={open} timeout="auto" unmountOnExit>
                            <List component="div" disablePadding className={classes.sublist}>
                                <ListItem button className={classes.subitemLink + listItemClasses}>
                                    {typeof item.icon === "string" ? (
                                        <Icon
                                            className={classNames(classes.itemIcon, whiteFontClasses, {
                                                [classes.itemIconRTL]: props.rtlActive
                                            })}
                                        >
                                            {item.icon}
                                        </Icon>
                                    ) : (
                                        <item.icon
                                            className={classNames(classes.itemIcon, whiteFontClasses, {
                                                [classes.itemIconRTL]: props.rtlActive
                                            })}
                                        />
                                    )}
                                    <ListItemText
                                        primary={
                                            props.rtlActive ? item.rtlName : item.name
                                        }
                                        className={classNames(classes.itemText, whiteFontClasses, {
                                            [classes.itemTextRTL]: props.rtlActive
                                        })}
                                        disableTypography={true}
                                    />
                                </ListItem>
                            </List>
                        </Collapse>
                    </NavLink>
                })}
            </div>);
            return (
                <div>
                <ListItem button className={classes.itemLink + listItemClasses} onClick={handleClick}>
                    {typeof prop.icon === "string" ? (
                        <Icon
                            className={classNames(classes.itemIcon, whiteFontClasses, {
                                [classes.itemIconRTL]: props.rtlActive
                            })}
                        >
                            {prop.icon}
                        </Icon>
                    ) : (
                        <prop.icon
                            className={classNames(classes.itemIcon, whiteFontClasses, {
                                [classes.itemIconRTL]: props.rtlActive
                            })}
                        />
                    )}
                    <ListItemText
                        primary={
                            props.rtlActive ? prop.rtlName : prop.name
                        }
                        className={classNames(classes.itemText, whiteFontClasses, {
                            [classes.itemTextRTL]: props.rtlActive
                        })}
                        disableTypography={true}
                    />
                </ListItem>
                    {nav}
                </div>
            )
        }

      })}
    </List>
  );
  var brand = (
    <div hidden={true} className={classes.logo}>
      <a
        href="https://www.creative-tim.com"
        className={classNames(classes.logoLink, {
          [classes.logoLinkRTL]: props.rtlActive
        })}
      >
        <div className={classes.logoImage}>
          <img src={logo} alt="logo" className={classes.img} />
        </div>
        {logoText}
      </a>
    </div>
  );
  return (
    <div>
      <Hidden mdUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={props.rtlActive ? "left" : "right"}
          open={props.open}
          classes={{
            paper: classNames(classes.drawerPaper, {
              [classes.drawerPaperRTL]: props.rtlActive
            })
          }}
          onClose={props.handleDrawerToggle}
          ModalProps={{
            keepMounted: true // Better open performance on mobile.
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>
            {props.rtlActive ? <RTLNavbarLinks /> : <AdminNavbarLinks />}
            {links}
          </div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
      <Hidden smDown implementation="css">
        <Drawer
          anchor={props.rtlActive ? "right" : "left"}
          variant="permanent"
          open
          classes={{
            paper: classNames(classes.drawerPaper, {
              [classes.drawerPaperRTL]: props.rtlActive
            })
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>{links}</div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
    </div>
  );
};

Sidebar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(sidebarStyle)(Sidebar);
